<template>
    <div>
        <Table highlight-row ref='table' :columns='columns' :loading='loading' :data='data' :height="520">
            <template slot-scope="{row}" slot="info">
                <span>{{row.info}}</span>
            </template>
            <template slot-scope="{ row }" slot="state">
                <div v-if="row.clue_status_name">
                    <Badge :status="colors[row.clue_status_name]" :text="row.clue_status_name" />
                </div>
            </template>
            <template slot-scope="{row}" slot="option">
                <a v-if="row.oneself" @click="handleDetailPatient(row)">详细</a>
            </template>
        </Table>
        <Page
            show-total
            show-elevator
            show-sizer
            :total="total"
            :current.sync="params.page"
            :page-size="params.pageSize"
            :page-size-opts="pageOpts"
            @on-change="changepage"
            @on-page-size-change="changepageSize"
            class="ivu-mt-16"
        ></Page>
        <!-- <div class='ivu-mt ivu-text-center'>
            <Page show-total show-elevator show-sizer :total='total' :current.sync='params.page'
                  :page-size='params.pageSize' :page-size-opts='pageOpts' @on-change='changepage'
                  @on-page-size-change='changepageSize' />
        </div> -->
        <Info v-if="openDetail" @cancelDrawer="changeInfo" :openDetail="openDetail" :patientInfo="patientInfo"/>
    </div>
    
</template>
<script>
import Info from './../../pages/newClue1/info.vue';
import {searchClue} from '@/api/globalsearch.js';
export default {
    components: {Info},
    data(){
        return{
            colors: {
                    新数据: 'processing',
                    未联系上: 'error',
                    转客户: 'success',
                    无效: 'warning',
                    测试: 'default'
                },
            columns: [
                {
                    title: '基本信息',
                    slot: 'info',
                    minWidth: 140,
                },
                {
                    title: '手机号',
                    key: 'mobile',
                    minWidth: 140,
                    render: (h,params) => {
                        return h('span',params.row.mobile ? params.row.mobile : '/'); 
                    }
                },
                {
                    title: '微信号',
                    // key: 'wechat_num',
                    minWidth: 150,
                    render: (h,params) => {
                        return h('span',params.row.wechat_num ? params.row.wechat_num : '/'); 
                    }
                },
                {
                    title: '咨询备注',
                    // key: '',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    render: (h,params) => {
                        return h('Ellipsis',
                        {
                            props:{'text':params.row.advisory_remark?params.row.advisory_remark:'/' ,
                            'length':6,
                            'tooltip':true}
                        }); 
                    }
                },
                {
                    title: '线索状态',
                    slot: 'state',
                    minWidth: 100,
                },
                {
                    title: '联系人',
                    key: 'contact_name',
                    minWidth: 100,
                    render: (h,params) => {
                        return h('span',params.row.contact_name ? params.row.contact_name : '/'); 
                    }
                },
                {
                    title: '城市',
                    key: 'region',
                    minWidth: 100,
                    render: (h,params) => {
                        return h('span',params.row.region ? params.row.region : '/'); 
                    }
                },
                {
                    title: '来源渠道',
                    key: 'source_channel',
                    minWidth: 120,
                    render: (h,params) => {
                        return h('span',params.row.source_channel ? params.row.source_channel : '/'); 
                    }
                },
                {
                    title: '创建时间',
                    key: 'created_at',
                    minWidth: 180,
                    render: (h,params) => {
                        return h('span',params.row.created_at ? params.row.created_at : '/'); 
                    }
                },
                {
                    title: '操作',
                    slot: 'option',
                    minWidth: 100,
                },
            ],
            loading: false,
            data: [],
            openDetail: false,
            patientInfo: {},
            total:0,
            pageOpts: [10, 15, 20, 30, 50],
            params:{
                page: 1,
                pageSize: 10,
            },
            keyword:''
        };
    },
    methods: {
        initial(val){            
            if(val == ''){
                this.data = [];
            }else{
                this.keyword=val
                this.getsearchClue(val);
            }
            
        },
         /* @函数功能: 分页 */
        changepage(e) {
            this.params.page = e;
            this.getsearchClue(this.keyword);
        },
        /* @函数功能: 每页数量 */
        changepageSize(e) {
            this.params.pageSize = e;
            this.getsearchClue(this.keyword);
        },
        getsearchClue(val){
            this.loading=true
            searchClue({type: 'clue',true_keyword: val,...this.params}).then(res => {
                this.total = res.total;
                this.data = res.list;
                this.loading=false
            }).catch(()=>{
                this.loading=false
            });
        },
        handleDetailPatient (info) {
            this.openDetail = true;
            this.patientInfo = info;
        },
        changeInfo(){
                this.openDetail = false;
            },
    }
    
};
</script>